<template>
    <div class="page" 
        v-loading="loading"
        :element-loading-text="loadTxt"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.7)">
        <leftBar />
        <div class="page_two">
            <div class="right_nav">
                <el-menu
                    :default-active='$route.path'
                    class="el-menu-vertical-demo"
                    text-color="#7987A3"
                    router>
                    <template v-for="(item, index) in menus">
                        <template v-if="item.menus">
                            <el-submenu :index="index+''" :key="index">
                                <template slot="title">
                                    <span>{{item.title}}</span>
                                </template>
                                <template v-for="child in item.menus">
                                    <template v-if="child.page == curMenu">
                                        <el-menu-item :index="child.path" :key="child.path">{{child.title}}</el-menu-item>
                                    </template>
                                </template>
                            </el-submenu>
                        </template>
                        <template v-else>
                            <template v-if="item.parent == true">
                                <template v-if="item.page == curMenu">
                                    <el-menu-item :index="item.path" :key="index">{{item.title}}</el-menu-item>
                                </template>
                            </template>
                            <template v-else>
                                <el-menu-item :index="item.path" :key="index">{{item.title}}</el-menu-item>
                            </template>
                        </template>  
                    </template>
                </el-menu>
            </div>
            <div class="two_bd">
                <router-view @getMessage="showMsg" @getpage="selectMenu"></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import leftBar from '@/components/leftBar.vue'
    export default {
        name: 'pageIndex',
        data(){
            return {
                menus:[
                    {
                        title:'封面',
                        path:'/'
                    },
                    {
                        title:'优秀设计师',
                        path:'/designer',
                        parent:true,
                        page:''
                    },
                    {
                        title:'优秀设计师',
                        path:'/designer/0',
                        parent:true,
                        page:'0'
                    },
                    {
                        title:'优秀设计师',
                        path:'/designer/1',
                        parent:true,
                        page:'1'
                    },
                    {
                        title:'优秀设计师',
                        path:'/designer/2',
                        parent:true,
                        page:'2'
                    },
                    {
                        title:'优秀设计师',
                        path:'/designer/3',
                        parent:true,
                        page:'3'
                    },
                    {
                        title:'优秀设计师',
                        path:'/designer/4',
                        parent:true,
                        page:'4'
                    },
                    {
                        title:'优秀设计师',
                        path:'/designer/5',
                        parent:true,
                        page:'5'
                    },
                    {
                        title:'ID作品',
                        path:'',
                        menus:[
                            {
                                title:'主推',
                                path:'/works/main',
                                page:''
                            },
                            {
                                title:'主推',
                                path:'/works/main/0',
                                page:'0'
                            },
                            {
                                title:'主推',
                                path:'/works/main/1',
                                page:'1'
                            },
                            {
                                title:'主推',
                                path:'/works/main/2',
                                page:'2'
                            },
                            {
                                title:'主推',
                                path:'/works/main/3',
                                page:'3'
                            },
                            {
                                title:'主推',
                                path:'/works/main/4',
                                page:'4'
                            },
                            {
                                title:'主推',
                                path:'/works/main/5',
                                page:'5'
                            },
                            {
                                title:'主推',
                                path:'/works/main/6',
                                page:'6'
                            },
                            {
                                title:'主推',
                                path:'/works/main/7',
                                page:'7'
                            },
                            {
                                title:'主推',
                                path:'/works/main/8',
                                page:'8'
                            },
                            {
                                title:'主推',
                                path:'/works/main/10',
                                page:'10'
                            },
                            {
                                title:'入围',
                                path:'/works/list',
                                page:''
                            },
                            {
                                title:'入围',
                                path:'/works/list/0',
                                page:'0'
                            },
                            {
                                title:'入围',
                                path:'/works/list/1',
                                page:'1'
                            },
                            {
                                title:'入围',
                                path:'/works/list/2',
                                page:'2'
                            },
                            {
                                title:'入围',
                                path:'/works/list/3',
                                page:'3'
                            },
                            {
                                title:'入围',
                                path:'/works/list/4',
                                page:'4'
                            },
                            {
                                title:'入围',
                                path:'/works/list/5',
                                page:'5'
                            },
                            {
                                title:'入围',
                                path:'/works/list/6',
                                page:'6'
                            },
                            {
                                title:'入围',
                                path:'/works/list/7',
                                page:'7'
                            },
                            {
                                title:'入围',
                                path:'/works/list/8',
                                page:'8'
                            },
                            {
                                title:'入围',
                                path:'/works/list/9',
                                page:'9'
                            },
                            {
                                title:'入围',
                                path:'/works/list/10',
                                page:'10'
                            },
                            {
                                title:'入围',
                                path:'/works/list/11',
                                page:'11'
                            },
                            {
                                title:'入围',
                                path:'/works/list/12',
                                page:'12'
                            },
                            {
                                title:'入围',
                                path:'/works/list/13',
                                page:'13'
                            },
                            {
                                title:'入围',
                                path:'/works/list/14',
                                page:'14'
                            },
                            {
                                title:'入围',
                                path:'/works/list/15',
                                page:'15'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other',
                                page:''
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/0',
                                page:'0'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/1',
                                page:'1'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/2',
                                page:'2'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/3',
                                page:'3'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/4',
                                page:'4'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/5',
                                page:'5'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/6',
                                page:'6'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/7',
                                page:'7'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/8',
                                page:'8'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/9',
                                page:'9'
                            },
                            {
                                title:'其他作品',
                                path:'/works/other/10',
                                page:'10'
                            }
                        ]
                    },
                    {
                        title:'创新表达',
                        path:'',
                        menus:[
                            {
                                title:'主推',
                                path:'/innovate/main',
                                page:''
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/0',
                                page:'0'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/1',
                                page:'1'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/2',
                                page:'2'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/3',
                                page:'3'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/4',
                                page:'4'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/5',
                                page:'5'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/6',
                                page:'6'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/7',
                                page:'7'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/8',
                                page:'8'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/9',
                                page:'9'
                            },
                            {
                                title:'主推',
                                path:'/innovate/main/10',
                                page:'10'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list',
                                page:''
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/0',
                                page:'0'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/1',
                                page:'1'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/2',
                                page:'2'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/3',
                                page:'3'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/4',
                                page:'4'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/5',
                                page:'5'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/6',
                                page:'6'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/7',
                                page:'7'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/8',
                                page:'8'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/9',
                                page:'9'
                            },
                            {
                                title:'入围',
                                path:'/innovate/list/10',
                                page:'10'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other',
                                page:''
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/0',
                                page:'0'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/1',
                                page:'1'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/2',
                                page:'2'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/3',
                                page:'3'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/4',
                                page:'4'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/5',
                                page:'5'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/6',
                                page:'6'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/7',
                                page:'7'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/8',
                                page:'8'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/9',
                                page:'9'
                            },
                            {
                                title:'其他作品',
                                path:'/innovate/other/10',
                                page:'10'
                            }
                        ]
                    },
                    {
                        title:'设计资讯',
                        path:'/info'
                    },
                    {
                        title:'部门动态',
                        path:'/department'
                    },
                ],
                loading:false,
                loadTxt:'拼命加载中',
                curMenu:'',
            }
        },
        components: {
            leftBar
        },
        methods:{
            showMsg (val) {   //  val即为子组件传过来的值
                this.loading = true;
                if(val.total){
                    let percent = Math.ceil(val.num/val.total * 100);
                    this.loadTxt = percent + '% 拼命加载中'
                    if(percent >= 99 || val.num + 1 == val.total){
                        this.loading = false
                    }
                }
            },
            selectMenu(val){
                this.curMenu = val.page;
            }
        }
    }
</script>

<style scoped>
    .page_two{position: absolute;top: 50%;left: 50%;width:1192px;height:820px;margin:-410px 0 0 -580px;}
    .page_two .two_bd{position: relative;width:100%;height:100%;background:#fff;box-shadow: 0px 6px 8px #dee2e9;}
    .right_nav{width:120px;position: absolute;top:0;right:-120px;}

    .el-menu{background:none;border-right:0;}
    .el-menu .el-menu-item{background:#fff;margin-bottom:10px;height:40px;line-height:40px;border-radius: 0px 4px 4px 0px;padding-left:22px!important;}
    .el-menu .el-submenu{background:#fff;margin-bottom:10px;border-radius: 0px 4px 4px 0px;overflow: hidden;}
    .el-menu >>> .el-submenu__title{height:40px;line-height:40px;padding-left:22px!important;}
    .el-menu .el-submenu .el-menu-item{margin-bottom:0;min-width:120px;}
    .el-menu-item.is-active{background:#5B8CFF;color:#fff;}
    .el-menu .is-active >>> .el-submenu__title{background:#5B8CFF;color:#fff!important;}
    .el-menu .is-active .el-menu-item.is-active{background:#fff;color:#5B8CFF;}
</style>